<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container" v-auth-dir="`pole:warning:list`">
      <span class="search-label">一体杆名称：</span>
      <el-input
        v-model="poleForm.poleName"
        clearable
        placeholder="请输入内容"
        class="search-main"
      />
      <span class="search-label">一体杆编号：</span>
      <el-input
        v-model="poleForm.poleNumber"
        clearable
        placeholder="请输入内容"
        class="search-main"
      />
      <span class="search-label">处置状态：</span>
      <el-select v-model="poleForm.handleStatus">
        <el-option
          v-for="item in handleStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button
        type="primary"
        class="search-btn"
        @click="serachFn"
        v-auth-dir="`pole:warning:query`"
      >查询</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="warningList">
        <el-table-column type="index" label="序号" />
        <el-table-column label="一体杆名称" prop="poleName" />
        <el-table-column label="一体杆编号" prop="poleNumber" />
        <el-table-column label="故障类型" prop="errorType" />
        <el-table-column label="处置状态" prop="handleStatus">
          <template #default="scope">
            {{ status[scope.row.handleStatus] }}
          </template>
        </el-table-column>
        <el-table-column label="告警时间" prop="warningTime" />
        <el-table-column
          label="操作"
          show-overflow-tooltip
        >
          <!--
            0 未派单-派单 详情 删除
            1 已派单-     详情
            2 已接单-     详情
            3 已完成-     详情 删除
         -->
          <template #default="scope">
            <el-button
              size="mini"
              type="text"
              :disabled="(!(scope.row.handleStatus==='0'))"
              @click="openDialog(scope.row.id)"
              v-auth-dir="`pole:warning:send`"
            >派单</el-button>
            <el-button
            v-auth-dir="`pole:warning:query`"
              size="mini"
              type="text"
              @click="$router.push(`/warning?id=${scope.row.id}`)"
            >详情</el-button>
            <el-button
            v-auth-dir="`pole:warning:remove`"
              size="mini"
              type="text"
              :disabled="((scope.row.handleStatus==='1')||(scope.row.handleStatus==='2'))"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next"
        :page-size="poleForm.pageSize"
        :total="total"
        @current-change="handlePage"
      />
    </div>
    <!-- 派单弹窗 -->
    <el-dialog title="告警派单" :visible.sync="dialogFormVisible" width="30%" @close="resetForm">
      <el-form ref="employeeFrom" :model="dispatechUser" :rules="employeeFromRules">
        <el-form-item label="处理人" prop="userId">
          <el-select v-model="dispatechUser.userId" placeholder="请选择负责人">
            <el-option
              v-for="item in employeeUserList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dispatchPole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWarningListAPI, dispatchPoleAPI } from '@/apis/warning'
import { getEmployeeListAPI } from '@/apis/employee'
export default {
  data() {
    return {
      poleForm: {
        page: 1,
        pageSize: 5,
        poleName: '',
        poleNumber: '',
        handleStatus: ''
      },
      warningList: [],
      total: 0,
      handleStatus: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '0',
          label: '未派单'
        },
        {
          value: '1',
          label: '已派单'
        },
        {
          value: '2',
          label: '已接单'
        },
        {
          value: '3',
          label: '已完成'
        }
      ],
      type: '',
      status: {
        '0': '未派单',
        '1': '已派单',
        '2': '已接单',
        '3': '已完成'
      },
      dialogFormVisible: false,
      form: [
        { id: null, name: '' }
      ],
      dispatechUser: {
        id: null,
        userId: null,
        handleStatus: 1
      },
      employeeFromRules: {
        userId: [
          { required: true, message: '请选择负责处理事件的人员', trigger: 'change' }
        ]
      },
      params: {
        page: 1,
        pageSize: 10
      },
      employeeUserList: []
    }
  },
  computed: {
    // total: ''
  },
  created() {
    this.getWarningList()
  },
  methods: {
    // 修改当前页码
    handlePage(nextPage) {
      this.poleForm.page = nextPage
      this.getWarningList()
    },
    // 修改当前页信息条数
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize
    },
    // 查询功能
    serachFn() {
      this.poleForm.page = 1
      this.getWarningList()
    },
    // 获取告警记录列表
    async getWarningList() {
      const res = await getWarningListAPI(this.poleForm)
      console.log(res)
      this.warningList = res.data.rows
      this.total = res.data.total
    },
    // 派单窗口
    async openDialog(id) {
      this.dialogFormVisible = true
      console.log(id)
      // 获取员工列表
      const employeeList = await getEmployeeListAPI(this.params)
      // console.log(employeeList)
      this.employeeUserList = employeeList.data.rows
      this.dispatechUser.id = id
      // const res = await dispatchPoleAPI()
      // console.log(res)
    },
    // 提交派单任务
    async dispatchPole() {
      await this.$refs.employeeFrom.validate()
      const res = await dispatchPoleAPI(this.dispatechUser)
      // console.log(res)
      if (res.code === 10000) {
        this.$message({
          type: 'success',
          message: res.msg
        })
        this.dialogFormVisible = false
        await this.$refs.employeeFrom.resetFields()
        this.getWarningList()
      }
    },
    // 关闭窗口时重置表单
    resetForm() {
      this.$refs.employeeFrom.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;

  .search-main {
    width: 220px;
    margin-right: 10px;
  }

  .search-btn {
    margin-left: 20px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
</style>
